<template>
  <div class="hot_rec" v-if="hot_rec_data && hot_rec_data.length > 0">
    <div 
      class="hot_rec_item" 
      v-for="(item,index) of hot_rec_data" 
      :key="index"
      @click="itemClick(item.link_url)"
      :style="{backgroundColor:item.bgc}"
      >
        <!-- 分为一行 -->
        <van-row>
          <!-- 分为两列 -->
          <!-- 文字 -->
          <van-col span="16" class="hot_rec_font">
            <!-- 标题部分 -->
            <span class="item_title" :style="{color:item.font_color}">{{item.hot_title}}</span>
            <!-- 详情部分 -->
            <span class="item_desc" :style="{color:item.font_color}">{{item.desc}}</span>
          </van-col>
          <!-- 图片 -->
          <van-col span="8">
            <div class="img_div">
              <img :src="getImgPath + item.img_path">
            </div>
          </van-col>
        </van-row>
      </div>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
export default {
  name:"HotRec",
  props:["hot_rec_data"],
  data() {
    return {
      
    }
  },
  methods: {
    // 点击事件
    itemClick(link_url){
      if(!link_url) return;
      this.$router.push(link_url);
    }
  },
  computed: {
    ...mapGetters("ImgPath",{
      getImgPath:"getImgPath"
    })
  },
}
</script>
<style lang="less" scoped>
 .hot_rec{
    font-size: 0rem;
    background-color: #ffffff;
    margin-top: 0.06rem;
  }

  .hot_rec_item{
    font-size: 0.12rem;
    display: inline-block;
    width: 50%;
    height: 0rem;
    overflow: hidden;
    padding-bottom: 0.75rem;
  }
  .img_div{
    width: 0.64rem;
    padding-top: 0.05rem;
    overflow: hidden;
    box-sizing: border-box;
    img{
      width: 100%;
    }
  }

  .hot_rec_font{
    padding: 0.08rem 0.1rem;
  }

  .item_title{
    display: block;
    font-size: 0.15rem;
    font-weight: bold;
  }

  .item_desc{
    font-size: 0.12rem;
  }
</style>